<template>
  <el-dialog append-to-body title="选择设备" :close-on-click-modal="false" :visible.sync="dialogVisible">
    <!-- 树形结构 -->
    <div class="flex px-10" style="height: 50vh">
      <!-- 树形结构 -->
      <CommonBody
        class="border-color-1 border overflow-y-auto mr-10 rounded"
        hasOrgan
        :diy="true"
        cl
        style="width: 38%"
        @chosen="clickOrgan"
      >
        <!-- 区域机构树 -->
      </CommonBody>

      <div class="flex1 border-color-1 border p-3 rounded flex-col flex">
        <h2 class="text-xl mb-3">处理人</h2>
        <el-input
          v-model="deviceName"
          placeholder="输入人员名称"
          class="rounded-full"
          @keydown.enter.native="getDeviceName({ deviceName: deviceName })"
        >
          <template #suffix>
            <i class="el-input__icon el-icon-search"></i>
          </template>
        </el-input>
        <div class="box-bg-1 h-10 leading-10 pl-2 my-2 rounded flex">
          <div class="w-1/2 text-center">人员名称</div>
          <div class="w-1/2 text-center">描述</div>
        </div>
        <el-radio-group v-model="model.dataForm.deviceId" class="flex1 overflow-y-scroll" @change="deviceChange">
          <el-radio v-for="(item, i) in deviceList" :key="i" :label="item.id" class="border-color-1 border-b">
            <div class="flex">
              <div class="w-1/2 text-center">{{ item.deviceName }}</div>
              <div class="w-1/2 text-center">{{ item.deviceName }}</div>
            </div>
          </el-radio>
        </el-radio-group>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="sure">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import index from './index'
export default {
  name: 'FormModal',
  /**
   * 混入（表单）
   */
  mixins: [index],
}
</script>

<style lang="scss" scoped>
.img-cover {
  width: 30%;
}
</style>
